<template>
  <div class="my">
    <div>
      <router-view></router-view>
    </div>
    <div class="my-bg" :style="{ backgroundImage: `url(${userInfo.userBg})` }">
      <div class="uploader-box">
        <van-uploader :after-read="upload" />
      </div>
    </div>

    <div class="my-box">
      <div class="my-info">
        <div class="my-img">
          <img class="auto-img" src="../assets/home_active.png" alt="" />
        </div>
        <div class="user-info">
          <div class="user-name one-text">{{ userInfo.nickName }}</div>
          <div class="desc one-text">
            {{ userInfo.desc ? userInfo.desc : "这家伙很懒，什么也没有留下！" }}
          </div>
        </div>
      </div>

      <div class="cell-list">
        <van-grid clickable :column-num="5">
          <van-grid-item icon="user-o" text="个人资料" to="/Personal" />
          <van-grid-item icon="balance-list-o" text="我的订单" to="/Order" />
          <van-grid-item icon="star-o" text="我的收藏" to="/Like" />
          <van-grid-item icon="location-o" text="地址管理" to="/MyAddress" />
          <van-grid-item icon="shop-o" text="招商加盟" to="/Shop" />
        </van-grid>
      </div>
    </div>

    <div class="rili">
      <div class="month">{{month}}</div>
      <van-calendar title="月咖啡日历" :poppable="false"
      :show-confirm="false" :style="{ height: '500px' }" />
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      userInfo: {
        desc: "",
        nickName: "",
        userBg: "",
        month: "",
      },
    };
  },

  created() {
    this.getMyData();
    this.getMonth();
  },

  methods: {
    getMyData() {
      this.axios({
        method: "get",
        url: "/findMy",
      })
        .then((result) => {
          if (result.data.code === 700) {
            this.$toast("您未登录");
            this.$router.push({ name: "Login" });
            return;
          }

          if (result.data.code === "A001") {
            this.userInfo = result.data.result[0];
          }
        })
        .catch((err) => {});
    },

    upload(file) {
      let imgType = file.file.type.split(/\//)[1];

      let serverBase64Img = file.content.replace(
        /data:image\/[A-Za-z]+;base64,/,
        ""
      );

      this.axios({
        method: "post",
        url: "/updateUserBg",
        data: {
          imgType,
          serverBase64Img,
        },
      })
        .then((result) => {
          this.$toast(result.data.msg);

          if (result.data.code === 700) {
            this.$router.push({ name: "Login" });
            return;
          }

          if (result.data.code === "I001" && result.data.result[0] === 1) {
            this.userInfo.userBg = result.data.userBg;
          }
        })
        .catch((err) => {
        });
    },

    goPage(name) {
      this.$router.push({ name });
    },

    getMonth() {
      let date = new Date();
      this.month = date.getMonth() + 1;
    },
  },
};
</script>

<style lang="less" scoped>
.my {
  .cell-list-item {
    border-bottom: 1px solid #f0f0f0;
    &:last-child {
      border-bottom: none;
    }
  }
  .cell-list {
    margin-top: 50px;
  }
  .rili {
    position: relative;
    margin: 0px 10px 60px 10px;
    .month{
      position: absolute;
      color: #0c34ba;
      left: 125px;
      top: 11px;
      font-size: 17px;
      font-weight: bold;
    }
  }
  .user-name {
    font-weight: bold;
    color: #0c34ba;
  }
  .desc {
    margin-top: 10px;
    color: #666;
  }
  .user-info {
    font-size: 14px;
    margin-left: 20px;
  }
  .my-img {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }
  .my-info {
    display: flex;
    align-items: center;
  }
  .my-bg {
    height: 140px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #e8e8e8;
    position: relative;
  }

  .uploader-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    /deep/ .van-uploader {
      width: 100%;
      height: 100%;
    }
    /deep/ .van-uploader__wrapper {
      width: 100%;
      height: 100%;
    }
    /deep/ .van-uploader__upload {
      margin: 0;
      width: 100%;
      height: 100%;
    }
  }

  .my-box {
    padding: 10px;
    margin: 0 10px;
    position: relative;
    top: -35px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.5) 0px,
      rgba(255, 255, 255, 0.5) 35px,
      rgba(255, 255, 255, 1) 35px
    );
  }
}
</style>